/**
 * 自定义树形下拉控件
 * by zhangxinyue
 * create 2020-08-31
 */
import React from 'react';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { TreeSelect, Tooltip } from 'antd';
import { FormItemLayout } from '../formPub';
import TreeSelectItemC from './TreeSelectItemC.js';

class TreeSelectC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '',
    placeholder: '请选择',
    helper: '',
    onChange: () => {},
    onSelect: () => {},
    onDeselect: () => {},
    onDropdownVisibleChange: () => {},
    onRef: () => {}, // 本组件的引用
    dataSource: [],
    treeCheckStrictly: false, //（父子节点选中状态不再关联），会使得 labelInValue 强制为 true
    isMultiple: false, // 默认不支持多选
    treeCheckable: false, // 默认不支持复选框
    allowClear: false, // 默认不支持删除
    treeDefaultExpandAll: false, // 默认不展开树节点
    showSearch: false, // 默认不显示查询框
    showCheckedStrategy: TreeSelect.SHOW_PARENT, // treeCheckable为true时，SHOW_PARENT生效
    formItemLayout: FormItemLayout, // 布局
    maxTagCount: 1,
    disabled: false, // 默认不禁用
    positionBody: false, //  下拉框，默认跟随，如果select父节点有滚动，下拉框被遮挡，则需要设置为true
    labalWrap: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      initialValue: '',
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    const valueF = {};
    valueF[this.props.dataIndex] = value;
    this.props.form.setFieldsValue(valueF);
  };

  render() {
    const { labalWrap, form, title, dataIndex, helper, formItemLayout, initialValue } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form.Item
        className={labalWrap ? 'labalWrap' : ''}
        {...formItemLayout}
        label={
          title ? (
            helper ? (
              <span>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span>{title}</span>
            )
          ) : undefined
        }
      >
        {getFieldDecorator(dataIndex, {
          initialValue: initialValue || undefined,
          rules: this.props.rules,
        })(<TreeSelectItemC {...this.props} />)}
      </Form.Item>
    );
  }
}

// props类型
TreeSelectC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  onSelect: PropTypes.func, // 选择值时触发的回调
  onDeselect: PropTypes.func, // 取消选择时触发的回调
  onDropdownVisibleChange: PropTypes.func, // 下拉框展开或闭合时触发的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  dataSource: PropTypes.array, // 树形结构数据源（如：{value:'id', title:'name',disabled:'是否禁用，默认为false',children:[])
  isMultiple: PropTypes.bool, // 支持多选
  treeCheckable: PropTypes.bool, // 显示checkbox（当此项为true时，isMultiple默认为true）
  allowClear: PropTypes.bool, // 显示清除按钮
  treeDefaultExpandAll: PropTypes.bool, // 默认展开所有树节点
  showSearch: PropTypes.bool, // 是否支持搜索框（默认根据value属性值进行筛选）
  showCheckedStrategy: PropTypes.oneOf([TreeSelect.SHOW_PARENT, TreeSelect.SHOW_ALL, TreeSelect.SHOW_CHILD]), // 定义选中项回填的方式
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  maxTagPlaceholder: PropTypes.object, // 隐藏 tag 时显示的内容
  maxTagCount: PropTypes.number,
  filterTreeNode: PropTypes.func,
  onSearch: PropTypes.func,
  dropdownClassName: PropTypes.string,
  treeCheckStrictly: PropTypes.bool, //（父子节点选中状态不再关联）
  formItemLayout: PropTypes.object, // 布局
  disabled: PropTypes.bool, // 禁用
  positionBody: PropTypes.bool, //  下拉框默认跟随，如果select父节点有滚动，下拉框被遮挡，则需要设置为true
};

export default TreeSelectC;
